
import { Select } from 'element-ui';

<template>
  <div>
    <div style="margin: 0,0,0,10%;">
      商铺编号<el-input v-model="resourceName" placeholder="请输入内容" style="width: 20%;"></el-input><el-button type="primary" @click="Select">查询</el-button>
    </div>
    <div>
        <el-descriptions>
            <el-descriptions-item label="编号" >{{item.name}}</el-descriptions-item>
            <el-descriptions-item label="商铺状态" >{{ item.state}}</el-descriptions-item>
            <el-descriptions-item label="到期日期" >{{item.stateEndTime}}</el-descriptions-item>
            <el-descriptions-item label="占地面积" >{{ item.buildingSquare}}</el-descriptions-item>
           <el-descriptions-item label="使用面积" >{{ item.useSquare}}</el-descriptions-item>
            <el-descriptions-item label="行业"  >{{ item.userTrade}}</el-descriptions-item>
           <el-descriptions-item label="客户姓名" >{{ item.userName}}</el-descriptions-item>
            <el-descriptions-item label="联系方式" >{{ item.userPhone}}</el-descriptions-item>
            <el-descriptions-item label="入住时间" >{{ item.creatorTime}}</el-descriptions-item>
           </el-descriptions>
         
    </div>
    <div>
    <el-tabs v-model="activeName">
    <el-tab-pane label="常规收费" name="first">
   <div>
    <el-button type="primary" @click="dialogTableVisible=true">收费</el-button>   
    <el-dialog title="常规收费" :visible.sync="dialogTableVisible" >
      <el-form ref="form" :model="form" label-width="80px">
                        <el-table :data="gridData" @selection-change="handleSelectionChange">
                          <el-table-column property="feeItemName" label="收费项目" ></el-table-column>
                          <el-table-column property="beginDate" label="项目开始时间"></el-table-column>
                          <el-table-column property="endDate" label="费用结束时间"></el-table-column>
                          <el-table-column property="total" label="金额"></el-table-column>
                          <el-table-column property="discount" label="优惠金额"></el-table-column>
                          <el-table-column property="lateFee" label="滞纳金"></el-table-column>
                          <el-table-column property="total" label="应收金额"></el-table-column>  
                        </el-table>  
                        </el-form>     
                     
                          <el-descriptions>
            <el-descriptions-item label="滞纳金" >{{0}}</el-descriptions-item>
            <el-descriptions-item label="优惠金额" >{{0}}</el-descriptions-item>
            <el-descriptions-item label="实际应收" >{{totalSum}}</el-descriptions-item>
            <el-descriptions-item label="可用预存款" >{{0}}</el-descriptions-item>
           <el-descriptions-item label="预存款付款" >{{0}}</el-descriptions-item>
            <el-descriptions-item label="找零结存">{{0}}</el-descriptions-item>
           <el-descriptions-item label="找零金额" >{{totalSum1}}</el-descriptions-item>
           </el-descriptions>
                             

    收款金额<el-input v-model="Collection" placeholder="0.00" style="width: 20%;display: inline-block;" ></el-input>
    
    付款方式<el-select v-model="ruleForm.payType" >
      <el-option label="现金" value="cash"></el-option>
      <el-option label="微信支付" value="weixin"></el-option>
      <el-option label="支付宝" value="aliPay"></el-option>
      <el-option label="刷卡" value="cardPay"></el-option>
      <el-option label="转账" value="transferPay"></el-option>
    </el-select>
  
  <el-checkbox v-model="checked" style="display: inline-block;">使用预付款</el-checkbox>
  <el-checkbox v-model="checked" style="display: inline-block;">找零结存</el-checkbox>
                        <div style="text-align: right;">
                          <el-button @click="dialogTableVisible=false">取消</el-button>
                          <el-button type="primary" @click="dialogTableVisible=false,add()">确定</el-button> 
                        </div>
                      
                      </el-dialog>       
    <el-button type="primary" @click="lishiTableVisible=true,Historical()">历史信息</el-button>
    <el-dialog title="历史信息" :visible.sync="lishiTableVisible">
                        <el-table :data="lishi">
                          <el-table-column type="index" label="序号" width="120"></el-table-column>
                          <el-table-column property="打印" label="打印" >
                            <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">打印</el-button>
        
      </template>
                          </el-table-column>
                          <el-table-column property="resourceName" label="编号"></el-table-column>
                          <el-table-column property="name" label="收费项目"></el-table-column>
                          <el-table-column property="payerName" label="客户姓名"></el-table-column>
                          <el-table-column property="creatorTime" label="费用开始时间"></el-table-column>
                          <el-table-column property="payTime" label="费用结束时间"></el-table-column>
                          <el-table-column property="payMoney" label="金额"></el-table-column>
                        </el-table>
                        <div>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
                      </el-dialog>
    <el-table ref="multipleTable" :data="tableData1" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55">
    </el-table-column>
    <el-table-column prop="id" label="id" width="120" visible="false">
    </el-table-column>
    <el-table-column prop="feeItemName" label="收费项名称" width="120">
    </el-table-column>
    <el-table-column prop="beginDate" label="起收日期" width="120">
    </el-table-column>
    <el-table-column prop="endDate" label="到期日期" show-overflow-tooltip>
    </el-table-column>
    <el-table-column prop="deadline" label="缴费期限" show-overflow-tooltip>
    </el-table-column>
    <el-table-column prop="price" label="单价" show-overflow-tooltip>
    </el-table-column>
    <el-table-column prop="num" label="数量" show-overflow-tooltip>
    </el-table-column>
    <el-table-column prop="total" label="金额" show-overflow-tooltip>
    </el-table-column>
  </el-table>
        </div>
    </el-tab-pane>
    <el-tab-pane label="临时收费" name="second">
        <div>
          <!-- 新增临时收费 -->
    <el-button type="primary"  @click="LinshiTableVisible=true">新增</el-button>
    <el-dialog title="新建临时收费" :visible.sync="LinshiTableVisible">
         
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="商铺编号" prop="resourceName">
    <el-input
  v-model="resourceName"
  :disabled="true">
</el-input>
  </el-form-item>
  <el-form-item label="客户名称" prop="userName">
    <el-input
  v-model="item.userName"
  :disabled="true">
</el-input>
  </el-form-item>
  <el-form-item label="收费项目" prop="feeItemName">
    <el-select v-model="ruleForm.feeItemName" placeholder="请选择">
      <el-option label="测试楼宇广告费" value="测试楼宇广告费"></el-option>
      <el-option label="广告费用" value="广告费用"></el-option>
      <el-option label="物业违章罚款" value="物业违章罚款"></el-option>
      <el-option label="装修违章罚款" value="装修违章罚款"></el-option>
      <el-option label="装修垃圾清运费" value="装修垃圾清运费"></el-option>
      <el-option label="场地占用费" value="场地占用费"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="付款方式" prop="payType">
    <el-select v-model="ruleForm.payType" placeholder="请选择">
      <el-option label="现金" value="cash"></el-option>
      <el-option label="微信支付" value="weixin"></el-option>
      <el-option label="支付宝" value="aliPay"></el-option>
      <el-option label="刷卡" value="cardPay"></el-option>
      <el-option label="转账" value="transferPay"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="收费金额" prop="amt" placeholder="请输入">
    <el-input v-model="ruleForm.amt"></el-input>
  </el-form-item>
  <el-form-item label="收费时间" required>
      <el-form-item prop="operateTime">
       
      
      <div class="block">
    <el-date-picker
      v-model="ruleForm.operateTime"
      type="date"
      value-format="yyyy-MM-dd HH:mm:ss"
      placeholder="选择日期">
    </el-date-picker>
  </div>
</el-form-item>
  </el-form-item>
  
  <el-form-item>
    
    <el-button @click="LinshiTableVisible=false">取消</el-button>
    <el-button type="primary" @click="submitForm">确定</el-button>
  </el-form-item>
</el-form>
    </el-dialog>
    <el-table ref="multipleTable" :data="tableData2" @selection-change="SelectionChange" tooltip-effect="dark" style="width: 100%" >
    <el-table-column type="index" label="序号" width="120">
    </el-table-column>
    <el-table-column prop="feeUser" label="客户姓名" width="120">
    </el-table-column>
    <el-table-column prop="feeItemName" label="收费项目" show-overflow-tooltip>
    </el-table-column>
    <el-table-column prop="payType" label="付款方式" show-overflow-tooltip>
    </el-table-column>
    <el-table-column prop="amt" label="收费金额" show-overflow-tooltip>
    </el-table-column>
    <el-table-column prop="operateUser" label="收款人" show-overflow-tooltip>
    </el-table-column>
    <el-table-column prop="operateTime" label="收款时间" show-overflow-tooltip>
    </el-table-column>
    <el-table-column prop="state" label="状态" show-overflow-tooltip>
    </el-table-column>
    <el-table-column prop="remark" label="备注" show-overflow-tooltip>
    </el-table-column>
    <el-table-column  label="操作" show-overflow-tooltip>
      <template slot-scope="scope">
            
            <el-button type="text" size="small" @click="tuikuanVisible = true, tuikuan(scope.row)">退款</el-button>
            <el-button type="text" size="small" @click="huanlianVisible = true">打印</el-button>
      </template>
    </el-table-column>
  </el-table>
        </div>
    </el-tab-pane>
<!-- 退款 -->
<el-dialog title="临时收费退款" :visible.sync="tuikuanVisible">      
         <el-form :model="tuikuanruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
     <el-form-item label="编号" prop="resourceName">
       <el-input
     v-model="resourceName"
     :disabled="true">
   </el-input>
     </el-form-item>
     <el-form-item label="客户姓名" prop="userName">
       <el-input
     v-model="item.userName"
     :disabled="true">
   </el-input>
     </el-form-item>
     <el-form-item label="收费项目" prop="feeItemName">
       <el-input
     v-model="tuikuanruleForm.feeItemName"
     :disabled="true">
   </el-input>
     </el-form-item>
   
     <el-form-item label="付款方式" prop="payType">
      <el-input
     v-model="tuikuanruleForm.payType"
     :disabled="true">
   </el-input>
     </el-form-item>
     <el-form-item label="退款金额" prop="amt" placeholder="请输入">
       <el-input v-model="tuikuanruleForm.amt" :disabled="true"></el-input>
     </el-form-item>
     <el-form-item label="收费时间" required>
         <el-form-item prop="operateTime">
         <div class="block">
       <el-date-picker
         v-model="tuikuanruleForm.operateTime"
         type="date"
         value-format="yyyy-MM-dd HH:mm:ss"
         placeholder="选择日期">
       </el-date-picker>
     </div>
   </el-form-item>
     </el-form-item>
     <el-form-item label="退款时间" required>
         <el-form-item prop="refundTime">
         <div class="block">
       <el-date-picker
         v-model="tuikuanruleForm.refundTime"
         type="date"
         value-format="yyyy-MM-dd HH:mm:ss"
         placeholder="选择日期">
       </el-date-picker>
     </div>
   </el-form-item>
     </el-form-item>
     <el-form-item label="退款方式" prop="returnpayType">
    <el-select v-model="returnpayType" placeholder="请选择">
      <el-option label="现金" value="cash"></el-option>
      <el-option label="微信支付" value="weixin"></el-option>
      <el-option label="支付宝" value="aliPay"></el-option>
      <el-option label="刷卡" value="cardPay"></el-option>
      <el-option label="转账" value="transferPay"></el-option>
    </el-select>
  </el-form-item>
     <el-form-item label="备注" prop="remark">
       <el-input
     v-model="tuikuanruleForm.remark"
     >
   </el-input>
     </el-form-item>
     <el-form-item>
       
       <el-button @click="tuikuanVisible=false">取消</el-button>
       <el-button type="primary" @click="submittuikuan">确定</el-button>
     </el-form-item>
   </el-form>
       </el-dialog>

<!-- 新增收取押金 -->

    <el-tab-pane label="收取押金" name="third">
      <div>
    <el-button type="primary"  @click="yajinTableVisible=true">新增</el-button>


    <el-dialog title="新建押金" :visible.sync="yajinTableVisible">
         
         <el-form :model="yajinruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
     <el-form-item label="商铺编号" prop="resourceName">
       <el-input
     v-model="resourceName"
     :disabled="true">
   </el-input>
     </el-form-item>
     <el-form-item label="客户名称" prop="userName">
       <el-input
     v-model="item.userName"
     :disabled="true">
   </el-input>
     </el-form-item>
     <el-form-item label="收费项目" prop="feeItemName">
       <el-select v-model="yajinruleForm.feeItemName" placeholder="请选择">
         <el-option label="测试楼宇广告费" value="测试楼宇广告费"></el-option>
         <el-option label="广告费用" value="广告费用"></el-option>
         <el-option label="物业违章罚款" value="物业违章罚款"></el-option>
         <el-option label="装修违章罚款" value="装修违章罚款"></el-option>
         <el-option label="装修垃圾清运费" value="装修垃圾清运费"></el-option>
         <el-option label="场地占用费" value="场地占用费"></el-option>
       </el-select>
     </el-form-item>
     <el-form-item label="付款方式" prop="payType">
       <el-select v-model="yajinruleForm.payType" placeholder="请选择">
         <el-option label="现金" value="cash"></el-option>
         <el-option label="微信支付" value="weixin"></el-option>
         <el-option label="支付宝" value="aliPay"></el-option>
         <el-option label="刷卡" value="cardPay"></el-option>
         <el-option label="转账" value="transferPay"></el-option>
       </el-select>
     </el-form-item>
     <el-form-item label="收费金额" prop="amt" placeholder="请输入">
       <el-input v-model="yajinruleForm.amt"></el-input>
     </el-form-item>
     <el-form-item label="收费时间" required>
         <el-form-item prop="operateTime">
         <div class="block">
       <el-date-picker
         v-model="yajinruleForm.operateTime"
         type="date"
         value-format="yyyy-MM-dd HH:mm:ss"
         placeholder="选择日期">
       </el-date-picker>
     </div>
   </el-form-item>
     </el-form-item>
     
     <el-form-item>
       
       <el-button @click="yajinTableVisible=false">取消</el-button>
       <el-button type="primary" @click="yajinsubmitForm">确定</el-button>
     </el-form-item>
   </el-form>
       </el-dialog>

    <el-table ref="multipleTable" :data="tableData3" tooltip-effect="dark" style="width: 100%" >
    <el-table-column type="index" label="序号" width="120">
    </el-table-column>
    <el-table-column prop="feeUser" label="客户姓名" width="120">
    </el-table-column>
    <el-table-column prop="feeItemName" label="收费项目" show-overflow-tooltip>
    </el-table-column>
    <el-table-column prop="payType" label="付款方式" show-overflow-tooltip>
    </el-table-column>
    <el-table-column prop="amt" label="收费金额" show-overflow-tooltip>
    </el-table-column>
    <el-table-column prop="operateUser" label="收款人" show-overflow-tooltip>
    </el-table-column>
    <el-table-column prop="operateTime" label="收款时间" show-overflow-tooltip>
    </el-table-column>
    <el-table-column prop="refundUser" label="退款人" show-overflow-tooltip>
    </el-table-column>
    <el-table-column prop="refundTime" label="退款时间" show-overflow-tooltip>
    </el-table-column>
    <el-table-column prop="state" label="状态" show-overflow-tooltip>
    </el-table-column>
    <el-table-column prop="remark" label="备注" show-overflow-tooltip>
    </el-table-column>

    <el-table-column  label="操作" show-overflow-tooltip>
      <template slot-scope="scope">

            <el-button type="text" size="small" @click="huanlianVisible = true, handleClick(scope.row)">打印</el-button>
      </template>
    </el-table-column>
  </el-table>
        </div>
    </el-tab-pane>
    <el-tab-pane label="预存款" name="fourth">
      <div><el-button type="primary" @click="addTableVisible=true">预存</el-button>
        <!-- 预存 -->
        <el-dialog title="预存" :visible.sync="addTableVisible">
           <el-form :model="yushoukuan"  :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
       <el-form-item label="编号" >
        <el-input
     v-model="resourceName"
     >
   </el-input>
       </el-form-item>
       <el-form-item label="客户名称" prop="feeUser" required>
         <el-input
       v-model="item.userName"
       :disabled="true">
     </el-input>
       </el-form-item>
       <el-form-item label="可用收费项" prop="resource">
      <el-radio-group v-model="yushoukuan.resource">
        <el-radio label="指定收费项"></el-radio>
        <el-radio label="所有收费项"></el-radio>
      </el-radio-group>
    </el-form-item>
       <el-form-item label="收费项目" prop="feeItemName" required>
           <el-select v-model="yushoukuan.feeItemName" placeholder="请选择">
           <el-option label="测试抄表燃气费" value="测试抄表燃气费"></el-option>
           <el-option label="测试物业费" value="测试物业费"></el-option>
           <el-option label="维修服务费" value="维修服务费"></el-option>
           <el-option label="装修管理服务费" value="装修管理服务费"></el-option>
           <el-option label="取暖费" value="取暖费"></el-option>
           <el-option label="空调费" value="空调费"></el-option>
           <el-option label="公共区域电费" value="公共区域电费"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="付款方式" prop="payType" required>
         <el-select v-model="yushoukuan.payType" placeholder="请选择">
           <el-option label="现金" value="cash"></el-option>
           <el-option label="微信支付" value="weixin"></el-option>
           <el-option label="支付宝" value="aliPay"></el-option>
           <el-option label="刷卡" value="cardPay"></el-option>
           <el-option label="转账" value="transferPay"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="收费金额" prop="amt" placeholder="请输入" required>
         <el-input v-model="yushoukuan.amt"></el-input>
       </el-form-item>
       <el-form-item label="收费时间" required>
           <el-form-item prop="operateTime">
           <div class="block">
         <el-date-picker
           v-model="yushoukuan.operateTime"
           type="date"
           value-format="yyyy-MM-dd HH:mm:ss"
           placeholder="选择日期">
         </el-date-picker>
       </div>
     </el-form-item>
       </el-form-item>
       
       <el-form-item>
         
         <el-button @click="addTableVisible=false">取消</el-button>
         <el-button type="primary" @click="add">确定</el-button>
       </el-form-item>
     </el-form>
         </el-dialog> 
        <el-button type="primary" >退还</el-button>
</div>
<div>
  <el-form ref="form" :model="form" label-width="80px">
    <el-table ref="multipleTable" :data="tableData4" tooltip-effect="dark" style="width: 100%" >
    <el-table-column type="index" label="序号" width="120"></el-table-column>
    <el-table-column prop="feeUser" label="客户姓名" width="120"> </el-table-column>
    <el-table-column prop="type" label="状态" show-overflow-tooltip></el-table-column>
    <el-table-column prop="feeItemName" label="收费项目" show-overflow-tooltip></el-table-column>
    <el-table-column prop="payType" label="付款方式" show-overflow-tooltip></el-table-column>
    <el-table-column prop="amt" label="金额" show-overflow-tooltip></el-table-column>
    <el-table-column prop="operateUser" label="收款人" show-overflow-tooltip></el-table-column>
    <el-table-column prop="operateTime" label="收款时间" show-overflow-tooltip></el-table-column>
    <el-table-column prop="payNo" label="单号" show-overflow-tooltip></el-table-column>
    <el-table-column  label="操作" show-overflow-tooltip>
      <template >
            <el-button type="text" size="small">打印收款单</el-button>
      </template>
    </el-table-column>
  </el-table>
                        </el-form>    
</div>

    </el-tab-pane>
    
  </el-tabs>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
    name:"cashier",
  data() {
    return {
      ruleForm: {
     
        },
        yajinruleForm:{

        },
        yushoukuan:{},

        tuikuanruleForm:{

        },
        rules: { 
          resourceName: [
          { required: true,  trigger: 'blur' },
            { min: 3, max: 5,  trigger: 'blur' }
          ],
          userName: [
          { required: true,  trigger: 'blur' },
            { min: 3, max: 5, trigger: 'blur' }
          ],
          feeItemName: [
          { required: true, trigger: 'change' },
            {  trigger: 'blur' }
          ],
          payType: [
          { required: true,  trigger: 'change'},
            {  trigger: 'blur' }
          ],
          amt: [
          { required: true,message: '请输入收费金额', trigger: 'change'},
          ],
          operateTime: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
         
         
        },

        addTableVisible:false,
      row:{},
      returnpayType:"",
      currentPage: 1,  //默认当前页
            pageSize: 5, //每页显示条数例表
            total: 0,//总条数
        tableData1: [],//常规收费表格数据
        tableData2: [],//临时收费表格数据
        tableData3: [],//收取押金表格数据
        tableData4: [],//预存款表格数据
        gridData:[],//常规收费
        lishiData:[],//历史收费
        item:{},
        Table: [],
        Collection:0,
        totalSum:0,
        totalSum1:0-this.totalSum,
        computed: {  
    // 计算"应收金额"列的总和  
    totalSum() {  
      return this.gridData.reduce((sum, row) => sum + row.total, 0);  
    },  
  }, 
        resourceName:"",//用户名
        feeItemNameList:"",
        id:"",
        linshiid:"",
        feeUser1:"",
        feeform:{
        },
        tuikuanVisible:false,
        dialogTableVisible: false,
        lishiTableVisible:false,
        LinshiTableVisible:false,
        yajinTableVisible:false,
        form:{
        },
        yushoukuan:{},
        selectedRows:[],
        selection:"",
        restaurants: [],
    }
  },
  methods:{
    loadAll() {
          return [
            { "value": "01-A-1-101"},
          ];
        },
        querySearch(queryString, cb) {
          var restaurants = this.restaurants;
          var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
          // 调用 callback 返回建议列表的数据
          cb(results);
        },
        createFilter(queryString) {
          return (restaurant) => {
            return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
          };
        },
    Selectfeename(){
              this.$http.get(
                  "http://localhost:8083/deposit/selectfeename", {
                  params: {
                      resourceName:this.resourceName,
                  },
              }
              ).then((result) => {
                  console.log(result.status);
                  console.log(result.message);
                  let $data = result.data;
                  this.feeUser1 = $data.data.list[0].feeUser;
                
              })
              .catch((err)=>{
                  this.$message.error(err);
              });
          },
    handleSizeChange(val) {
            this.communityList("", "", "", this.currentPage, val, "");
        },
        handleCurrentChange(val) {
            this.communityList("", "", "", val, this.pageSize, "");
        },
    toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
    // 获取所选行的数据
    handleSelectionChange(val) {  
      this.gridData = val; 
    } ,

//退款
tuikuan(row){
  console.log(row);
  this.tuikuanruleForm=row;
  this.linshiid=row.id;
          },
    //新增临时收费
    submitForm(){
      this.$http.post(
                "http://localhost:8083/charge/linshiCharge", {
                resourceName:this.resourceName,
                feeItemName:this.ruleForm.feeItemName,
                feeUser:this.item.userName,
                amt:this.ruleForm.amt,
                payType:this.ruleForm.payType,
                operateTime:this.ruleForm.operateTime,     
            }
            ).then((result) => {
                console.log(result.status);
                console.log(result.message);
                let $data = result.data;
                this.linshiid=$data
                console.log(this.linshiid);
                this.Select()
            })
            .catch((err)=>{
                this.$message.error(err);
            });
            this.LinshiTableVisible=false
          },

          //退款
          submittuikuan(){
            this.$http.get(
                "http://localhost:8083/charge/linshituikuanCharge", {
                  params: {
                     id:this.linshiid
                  }
            }
            ).then((result) => {
                console.log(result.status);
                console.log(result.message);
                this.Select()
            })
            .catch((err)=>{
                this.$message.error(err);
            });
            this.tuikuanVisible=false
          },
  //新增押金
  yajinsubmitForm(){
      this.$http.post(
                "http://localhost:8083/charge/yajinCharge", {
                resourceName:this.resourceName,
                feeItemName:this.yajinruleForm.feeItemName,
                feeUser:this.item.userName,
                amt:this.yajinruleForm.amt,
                payType:this.yajinruleForm.payType,
                operateTime:this.yajinruleForm.operateTime,     
            }
            ).then((result) => {
                console.log(result.status);
                console.log(result.message);
                this.Select()
            })
            .catch((err)=>{
                this.$message.error(err);
            });
            this.yajinTableVisible=false
          },

          // //收费
          // charges(){
          //   this.$http.post(
          //       "http://localhost:8083/charge/Charges", {
          //         params: {
          //          idlist:this.gridData,
          //         }
          //   }
          //   ).then((result) => {
          //       console.log(result.status);
          //       console.log(result.message);
          //       let $data = result.data;
            
          //       this.lishi = $data.data.list;
          //   })
          //   .catch((err)=>{
          //       this.$message.error(err);
          //   });


          // },
    //历史收费
    Historical(pageNum, pageSize,){
      
      this.$http.get(
                "http://localhost:8083/charge/lishiCharge", {
                  params: {
                    resourceName:this.resourceName,
                    pageNum: pageNum,
                    pageSize: pageSize,
                  }
            }
            ).then((result) => {
                console.log(result.status);
                console.log(result.message);
                let $data = result.data;
                this.currentPage = $data.data.pageNum; //当前页          
                this.pageSize = $data.data.pageSize; //每页显示条数   
                this.lishi = $data.data.list;
            })
            .catch((err)=>{
                this.$message.error(err);
            });
    },
    // 查询数据
    Select(){
      //常规收费表格数据
        this.$http.get(
                "http://localhost:8083/charge/RegularCharge", {
                params: {
                    resourceName:this.resourceName,
                },
            }
            ).then((result) => {
                console.log(result.status);
                console.log(result.message);
                let $data = result.data;
                this.tableData1 = $data.data.list;
            })
            .catch((err)=>{
                this.$message.error(err);
            });
          //顶部数据
            this.$http.get(
                "http://localhost:8083/charge/TopShop", {
                params: {
                    resourceName:this.resourceName,
                },
            }
            ).then((result) => {
                console.log(result.status);
                console.log(result.message);
                let $data = result.data;
                this.item = $data.data.list[0];
            })
            .catch((err)=>{
                this.$message.error(err);
            });
            //临时收费表格数据
            this.$http.get(
                "http://localhost:8083/charge/Provisional", {
                params: {
                    resourceName:this.resourceName,
                },
            }
            ).then((result) => {
                console.log(result.status);
                console.log(result.message);
                let $data = result.data;
                this.tableData2 = $data.data.list;
            })
            .catch((err)=>{
                this.$message.error(err);
            });
                //收取押金表格数据
                this.$http.get(
                "http://localhost:8083/charge/deposit", {
                params: {
                    resourceName:this.resourceName,
                },
            }
            ).then((result) => {
                console.log(result.status);
                console.log(result.message);
                let $data = result.data;
                this.tableData3 = $data.data.list;
            })
            .catch((err)=>{
                this.$message.error(err);
            });
            //预存款表格数据
            this.$http.get(
                "http://localhost:8083/charge/yucundeposit", {
                params: {
                    resourceName:this.resourceName,
                },
            }
            ).then((result) => {
                console.log(result.status);
                console.log(result.message);
                let $data = result.data;
                this.tableData4 = $data.data.list;
            })
            .catch((err)=>{
                this.$message.error(err);
            });
    },
    add(){
    this.$http.post(
                  "http://localhost:8083/advence/add", {
                  resourceName:this.resourceName,
                  feeUser:this.item.userName,
                  feeItemName:this.yushoukuan.feeItemName,
                   payType:this.yushoukuan.payType,
                   amt:this.yushoukuan.amt,
                  operateTime:this.yushoukuan.operateTime,     
              }
              ).then((result) => {
                  console.log(result.status);
                  console.log(result.message);
                  this.Select()
               }) .catch((err)=>{
                this.$message.error(err);
            });
              this.addTableVisible=false
            },
  },
 
  mounted() {//页面渲染前的生命周期钩子函数
        this.communityList("", "", "", this.currentPage, this.pageSize, "");
        this.restaurants = this.loadAll();
    },
}
</script>

<style lang="less" scoped>
 .pagination-container {  
    display: flex;  
    justify-content: flex-end;  
  }  
</style>